<template>
  <div class="container flex flex_column">
    <!-- 搜索     -->
    <div class="btnCon flex flex_between" style="border-bottom: none">
      <div class="plop">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="addClick">新建</el-button>
      </div>
      <!--      搜索框-->
      <div class="search">
        <el-input
          v-model="search.likeWords"
          placeholder="输入关键字"
          size="small"
          @keyup.enter.native="getAllLists"
        >
          <el-button
            slot="append"
            :loading="searchLoading"
            type="primary"
            icon="el-icon-search"
            :disabled="searchLoading"
            element-loading-spinner="el-icon-loading"
            @click="getAllLists"
          >
            搜索
          </el-button>
        </el-input>
      </div>
    </div>
    <!--table板块-->
    <div ref="tableCon" class="tableCon">
      <el-table
        v-loading="searchLoading"
        :data="dataLists"
        :height="tableHeight || 'auto'"
        border
        fit
        style="width: 100%"
      >
        <el-table-column
          prop="certificationName"
          label="资质名称"
          min-width="180"
        />
        <el-table-column
          prop="certificationTypeName"
          label="资质类型"
          min-width="100"
        />
        <el-table-column
          prop="fileTypeName"
          label="文件类型"
          min-width="100"
        />
        <el-table-column
          prop="fileSize"
          label="文件大小"
          min-width="100"
        >
          <template slot-scope="{row}">
            {{ convertBytes(row.fileSize) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="上传日期"
          min-width="100"
        />
        <el-table-column
          prop="uploadPersonName"
          label="上传人员"
          min-width="100"
        />
        <el-table-column label="操作" width="70px" align="center">
          <template slot-scope="scope">
            <div>
              <el-popover
                :ref="`popover-${scope.$index}`"
                placement="bottom-end"
                popper-class="tableOp"
                width="160"
                :popper-options="{ boundariesElement: 'opBox', removeOnDestroy: true }"
                trigger="click"
              >
                <div class="operation">
                  <ul>
                    <li @click="previewCertificationFile(scope.row)">预览</li>
                    <li @click="editIntelligence(scope.row)">修改</li>
                  </ul>
                  <ul>
                    <li @click="downloadFile(scope.row)">下载资质</li>
                  </ul>
                  <ul>
                    <li @click="deleteFile(scope.row)">删除</li>
                  </ul>
                </div>
                <div slot="reference" class="opBox pointer"><span class="el-icon-more c_3F61F1" /></div>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
   <!-- 分页 S-->
    <div class="d_pag">
      <pagination
        :total="total||0"
        :page.sync="search.pageIndex"
        :limit.sync="search.pageSize"
        @pagination="getAllLists"
      />
    </div>
    <!-- 分页 E-->
    <!-- 新建、修改资质   -->
    <el-dialog
      :title="ops==='add'?'新建资质':'修改资质'"
      :visible.sync="isAddIntelligence"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="30%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="intelligenceForm"
          :model="intelligenceForm"
          :rules="rules"
          label-width="80px"
          class="dialogForm"
        >
          <el-form-item label="资质名称" prop="certificationName">
            <el-input v-model="intelligenceForm.certificationName" placeholder="请输入资质名称" size="mini" clearable />
          </el-form-item>
          <el-form-item label="资质类型" prop="certificationType">
            <el-select
                        filterable v-model="intelligenceForm.certificationType" placeholder="请选择" size="mini">
              <el-option label="订单资质" :value="1" />
              <el-option label="企业资质" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="资质文件" prop="originalFileName">
            <el-upload
              class="avatar-uploader"
              action=" "
              :show-file-list="false"
              :http-request="myUpload"
            >
              <div class="flex c_3F61F1"><i class="iconfont uploadIco mr5" /><span>上传文件</span></div>
            </el-upload>
          </el-form-item>
          <el-form-item label=" ">
            <div v-if="intelligenceForm.file.fileSize" class="thumbnailBox flexs">
              <div class="icoBox">
                <template v-if="intelligenceForm.file.fileType==='.pdf'">
                  <div class="fileIco f22"><i class="iconfont pdfIco f22" /></div>
                </template>
                <template
                  v-else-if="intelligenceForm.file.fileType==='.xls' || intelligenceForm.file.fileType==='.xlsx' || intelligenceForm.file.fileType==='.csv'"
                >
                  <div class="fileIco f22" style="background:#54a55b; "><i class="iconfont ecelIco f22" /></div>
                </template>
                <template
                  v-else-if="intelligenceForm.file.fileType==='.doc' || intelligenceForm.file.fileType==='.docx'"
                >
                  <div class="fileIco f22" style="background:#409EFF; "><i class="iconfont wordIco f22" /></div>
                </template>
                <template
                  v-else-if="intelligenceForm.file.fileType==='.ppt' || intelligenceForm.file.fileType==='.pptx'"
                >
                  <div class="fileIco f22"><i class="iconfont pptIco f22" /></div>
                </template>
                <template
                  v-else-if="intelligenceForm.file.fileType==='.zip' || intelligenceForm.file.fileType==='.rar'"
                >
                  <div class="fileIco f22"><i class="iconfont zipIco f22" /></div>
                </template>
                <template
                  v-else-if="intelligenceForm.file.fileType==='.jpg' || intelligenceForm.file.fileType==='.jpeg' ||
                    intelligenceForm.file.fileType==='.png' || intelligenceForm.file.fileType==='.bmp' || intelligenceForm.file.fileType==='.ico'"
                >
                  <div class="fileIco f22"><i class="iconfont imgIco f22" /></div>
                </template>
                <template v-else>
                  <div class="fileIco f22"><i class="iconfont otherFileIco f22" /></div>
                </template>
              </div>
              <div class="uploadTxt">
                <div class="f12 fw">{{ intelligenceForm.file.originalFileName }}</div>
                <div class="C_999aaa">{{ convertBytes(intelligenceForm.file.fileSize) }}</div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="备注" prop="certificationRemark" class="mt12">
            <el-input
              v-model="intelligenceForm.certificationRemark"
              type="textarea"
              placeholder="请输入内容"
              size="mini"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddIntelligence=false">取 消</el-button>
        <el-button
          v-if="ops==='add'"
          v-loading="addLableLoading"
          :disabled="addLableLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="addIntelligence"
        >保存</el-button>
        <el-button
          v-if="ops==='modify'"
          v-loading="addLableLoading"
          :disabled="addLableLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="editSaveIntelligence"
        >保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { formatbytes } from '@/utils'
export default {
  name: '',
  components: { Pagination },
  data() {
    return {
      ops: 'add', // 操作、新增，修改，删除
      addLableLoading: false,
      searchLoading: false, // 客户资质列表加载效果
      isAddIntelligence: false, // 新建资质弹框是否打开
      // 客户资质搜索条件
      search: {
        pageIndex: 1,
        pageSize: 30,
        certificationType: 0,
        customerCode: '',
        likeWords: ''
      },
      dataLists: [], // 客户资质所有列表
      tableHeight: null, // 表格最大高度
      total: 0,
      intelligenceForm: {
        customerCode: '',
        certificationType: '',
        certificationName: '',
        certificationRemark: '',
        originalFileName: '',
        file: {
          fileType: '',
          fileSize: '',
          fileUrl: '',
          fileName: '',
          originalFileName: '',
          filePreview: ''
        }
      },
      lastFielUrl: '', // 对比文件是否改变
      rules: {
        certificationName: [
          { required: true, message: '资质名称必填', trigger: ['change', 'blur'] }
        ],
        certificationType: [
          { required: true, message: '请选择资质类型', trigger: 'change' }
        ],
        originalFileName: [
          { required: true, message: '请上传资质', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    // 客户资质所有列表数据
    this.getAllLists()
  },
  mounted() {
    // 客户订单表格最高高度
    this.calHeight()
  },
  methods: {
    // 修改客户资质
    editIntelligence(data) {
      this.isAddIntelligence = true
      this.ops = 'modify'
      const datas = { ...data }
      this.intelligenceForm = datas
      this.intelligenceForm.file = {}
      this.intelligenceForm.file.fileType = datas.fileType
      this.intelligenceForm.file.fileSize = datas.fileSize
      this.intelligenceForm.file.fileUrl = datas.fileUrl
      this.intelligenceForm.file.originalFileName = datas.originalFileName
      this.lastFielUrl = datas.fileUrl
      this.intelligenceForm.file.filePreview = ''
    },
    // 修改资质保存
    editSaveIntelligence() {
      this.intelligenceForm.customerCode = this.$route.query.customerCode
      // 判断文件是否改变
      if (this.lastFielUrl !== this.intelligenceForm.file.fileUrl) {
        this.intelligenceForm.fileIsChange = true
      } else {
        this.intelligenceForm.fileIsChange = false
      }
      const parmas = this.intelligenceForm
      this.$refs.intelligenceForm.validate((valid) => {
        if (valid) {
          this.addLableLoading = true
          this.$api.business.UpdateCustomerCertification(parmas).then(() => {
            this.addLableLoading = false
            this.isAddIntelligence = false
            this.getAllLists()
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }).catch(() => {
            this.addLableLoading = false
          })
        }
      })
    },
    // 新建资质点击事件
    addClick() {
      this.isAddIntelligence = true
      this.ops = 'add'
    },
    // 新建客户资质
    addIntelligence() {
      this.intelligenceForm.customerCode = this.$route.query.customerCode
      const parmas = this.intelligenceForm
      this.$refs.intelligenceForm.validate((valid) => {
        if (valid) {
          this.addLableLoading = true
          this.$api.business.UploadCustomerCertification(parmas).then(() => {
            this.addLableLoading = false
            this.isAddIntelligence = false
            this.getAllLists()
            this.$message({
              message: '新建成功',
              type: 'success'
            })
          }).catch(() => {
            this.addLableLoading = false
          })
        }
      })
    },
    // 客户资源删除
    deleteFile(data) {
      const parmas = {
        certificationID: data.certificationID,
        certificationCode: data.certificationCode
      }
      this.$confirm('确定删除当前客户资质, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.business.DeleteCustomerCertification(parmas).then(() => {
          this.getAllLists()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        })
      })
    },
    // 客户资质下载
    downloadFile(data) {
      const parmas = {
        certificationID: data.certificationID,
        certificationCode: data.certificationCode
      }
      this.$api.business.DownLoadCertificationFile(parmas).then(res => {
        window.open(res)
      })
    },
    // 客户资质预览
    previewCertificationFile(data) {
      const parmas = {
        certificationID: data.certificationID,
        certificationCode: data.certificationCode
      }
      this.$api.business.PreviewCertificationFile(parmas).then(res => {
        window.open(res)
      })
    },
    // 文件大小单位换算
    convertBytes(val) {
      return formatbytes(val)
    },
    // 上传资质
    myUpload(e) {
      const file = e.file
      // const type = file.name.substring(file.name.lastIndexOf('.') + 1)
      // const isLt2M = file.size / 1024 / 1024 < 2
      var formData = new FormData()
      formData.append('file', file)
      this.$api.common.UploadSingleFile(formData).then(res => {
        this.intelligenceForm.originalFileName = res.originalName
        this.$set(this.intelligenceForm.file, 'originalFileName', res.originalName)
        this.$set(this.intelligenceForm.file, 'fileSize', res.fileSize)
        this.$forceUpdate()
        this.intelligenceForm.file.fileType = res.fileExtension
        this.intelligenceForm.file.fileUrl = res.fileUrl
        this.intelligenceForm.file.fileName = res.fileName
        this.intelligenceForm.file.filePreview = ''
      })
    },
    // 客户资质所有列表数据
    getAllLists() {
      this.search.customerCode = this.$route.query.customerCode
      const parmas = this.search
      this.searchLoading = true
      this.$api.business.PageCustomersCertifications(parmas).then(res => {
        this.dataLists = res.list
        this.total = res.totalCount
        this.searchLoading = false
      }).catch(() => {
        this.searchLoading = false
      })
    },
    // 客户订单表格最高高度
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.tableCon.getBoundingClientRect()
        this.tableHeight = rect.height
      })
    },
    // 弹框关闭事件
    closeDialog() {
      if (this.$refs.intelligenceForm) {
        this.$refs.intelligenceForm.resetFields()
      }
      this.intelligenceForm = this.$options.data().intelligenceForm
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
}

.thumbnailBox {
  background: #3f61f110;
  padding: 8px;

  .fileIco {
    color: #fff;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 4px;
    background: #e13335;
  }

  .icoBox {
    height: 36px;
    width: 36px;
  }

  .uploadTxt {
    line-height: 18px;
    margin-left: 10px;
  }
}
</style>
